<template lang="pug">
  transition(:duration="900", enter-active-class="bounceInUp", leave-active-class="bounceOutDown")
    .minimap-wrap.animated(v-show="isShow", ref="miniMapWBox")
      .minimap(ref="miniMap", :class="{ big: isBigBtn }")
        .ctrl-box-top.pos-a.tac
          .icon.hand.active(@click="hideMap")
            i.iconfont ﹀
        .map-box(ref="mapBox")
          img(:src="mapImg")
          .point
            .item(
              :class="{'active': currentPoint == index }",
              v-for="(point, index) in formatMapList",
              :style="[styleObj[index]]",
              @click.stop="handleClick(point.scene_id, index)")
              .circle(
                v-if="currentPoint != index",
                :style='{width: isBigBtn ? "20px" : "12px", height: isBigBtn ? "20px" : "12px"}')
</template>

<script>
let timer = null
import { hasMiniMap } from '@/utils/menu'
import { handleSwitchScene } from '@/utils/scene'
import { isMobile, isPc, isPad } from '@/utils'

export default {
  data() {
    return {
      isShow: false,
      isHandClose: false,
      mapImg: '',
      num: 20,
      miniMapData: null,
      formatMapList: [],
      styleObj: [],
      bgStyle: { "background-image": "url('/static/images/scan.png')" },
      currentPoint: 0,
      isBigBtn: false,
      maxScle: 4,
      mapCfg: {
        mapwidth: 100,
        pointwidth: 12,
        pointheight: 12,
        curpointwidth: 30,
        curpointheight: 30
      }
    }
  },
  mounted() {
    this.$vgo.on('minimap:toggle', () => {
      let data = hasMiniMap(this.$krp.getSceneId())

      if(data) {
        this.isShow = !this.isShow
        this.miniMapData = data.miniMapObj
        this.getMap(this.miniMapData)
      }else {
        this.$vgo.tip('当前场景无导览图!')
      }
    })
  },
  methods: {
    getMap(mapList) {
      let WDW = window.innerWidth
      let WDH = window.innerHeight
      this.mapImg = $globalconfig.URLS.API + mapList.map_images
      this.formatMapList = []
      this.styleObj = []

      let list = mapList.mappointList
      let oW = 720, // 获取到图片实际宽度 720*oh/ow = x
          oH = 720 * (mapList.map_height/mapList.map_width), // 获取到的图片的实际高度
          sW = 720, // 编辑器图片缩放尺寸width
          sH, // 编辑器图片缩放尺寸height
          vW = WDW - 20, // 显示的高度
          vH = vW/oW*oH  // 显示的高度
      if (vH > WDH * 0.6 -20) {
        vH = WDH * 0.6 -20
        vW = vH/oH*oW
      }

      let mimiMapWrap = this.$refs.miniMap

      mimiMapWrap.style.height = vH + "px"
      mimiMapWrap.style.width = vW + "px"
      this.$refs.mapBox.style.height = vH + "px"

      let ofsetSize = vW/36
      list.map((item, index) => {
        sH = sW / (oW/oH)
        vH = vW / (oW/oH)
        if(oW >= sW) {
          item.left = item.x * (vW/sW)
          item.top = item.y * (vH/sH)
        }
        else {
          item.left = item.x * (vW/oW) - (sW-oW)/2 * (vW/oW)
          item.top = item.y * (vW/oH)
        }
        this.styleObj.push({
          left: `${Number(item.left + ofsetSize).toFixed(2)}px`,
          top: `${Number(item.top + ofsetSize).toFixed(2)}px`,
          transform: `translate(-50%, -50%) rotate(${Number(item.degrees).toFixed(2)}deg)`
        })

        // 当前小地图点，添加背景图片
        if(item.scene_id == this.$krp.getSceneId()) {
          this.currentPoint = index

          this.styleObj = Object.assign(this.styleObj, {
            width: `${this.mapCfg.curpointwidth}px`,
            height: `${this.mapCfg.curpointheight}px`,
            backgroundSize: '100% 100%',
            backgroundImage: `url(${$globalconfig.URLS.API}krpano/images/scan.png)`,
          })
        }
      })
      this.formatMapList = list
    },
    handleClick(id, index) {
      let sceneList = []
      this.$store.getters.sceneGroup.map(item => {
        sceneList = sceneList.concat(item.scenelist)
      })

      let sceneItem = sceneList.filter(item => item.scene_id == id)

      // 清除上次热点的背景图片
      this.styleObj[this.currentPoint].backgroundImage = `url()`
      this.styleObj[this.currentPoint].width = this.mapCfg.pointwidth
      this.styleObj[this.currentPoint].height = this.mapCfg.pointheight

      this.currentPoint = index
      // 触发场景分组，更新当前场景与分组的高亮状态
      this.$vgo.emit('sync:scene', sceneItem[0].scene_id)
    },
    hideMap() {
      this.isShow = false
      this.isHandClose = true
    }
  },
  watch: {
    isShow(val) {
      if(val) {
        timer = setInterval(() => {
          this.num = this.$krp.getView().hlookat
        }, 200)
      }
      else {
        clearInterval(timer)
      }
    },
    num(val) {
      let list = this.formatMapList
      let sceneId = this.$krp.getSceneId()
      if(this.styleObj.length) {

        this.styleObj[this.currentPoint].backgroundImage = 'url()'
        list.map((item, index) => {
          if(sceneId == item.scene_id) {
            this.styleObj[index].width = this.mapCfg.curpointwidth + 'px'
            this.styleObj[index].height = this.mapCfg.curpointheight + 'px'
            this.styleObj[index].backgroundSize = '100% 100%'
            this.styleObj[index].transform = `translate(-50%, -50%) rotate(${item.degrees + val}deg)`
            this.styleObj[index].backgroundImage = `url(${$globalconfig.URLS.API}krpano/images/scan.png)`

            this.currentPoint = index
          }
        })
        this.formatMapList = list
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/styles/color.styl'
.minimap-wrap
  position fixed
  bottom 0
  left 0
  z-index 9999
  width 100vw
  padding 10px 0
  background-color rgba(0, 0, 0, 0.5)
  .minimap
    position: relative
    transition scale 0.5s
    z-index 9999
    margin 0 auto
    left auto!important
    outline 1px solid #fff
    // left 50%!important
    // transform translateX(-50%)
    // &.big
    //   position fixed
    //   left 50%!important
    //   top 50%!important
    //   transform translate(-50%, -50%)
    .zoom
      left: 0
      top: 0
      padding: 0 5px
      background-color: rgba($black, .5)
      z-index: 14
      i
        font-size: 18px
        color: $white
      .minus
        display inline-block
        height 20px
        width 20px
        text-align center
        line-height 18px
        border-radius 50%
        border 1px solid $white
    .ctrl-box-top
      top: 0
      right: 0
      color: $white
      z-index: 14
      margin 5px 5px 0 0
      .icon
        width: 30px
        height: 26px
        line-height: 34px
        border-radius: 0
        &.active
          color: $white
          background: rgba(0, 0, 0, 0.5)
        i
          font-size: 20px
    .map-box
      box-sizing: border-box
      height: auto
      transition: all .6s
      img, .point
        position: absolute
        left: 0
        top: 0
        width: 100%
        transition: all .6s
        z-index: -1
      .point
        height: 100%
        z-index: 2
        .item
          position: absolute
          left: 50%
          top: 50%
          .circle
            width: 12px
            height: 12px
            border: 2px solid rgba($white, .9)
            border-radius: 50%
            background: $primary
</style>
